<template id="Orderdetails">
    <div class="Orderdetails_only">

        <div id="Orderdetails_stroll">
            <div class="Orderdetails_details">
                <img src="../image/dayu.jpg" alt="" @click="getOrderdetails1()">
                <img src="../image/phone.jpg" alt="">
                <h6>订单详情</h6>
            </div>
        <div class="Orderdetails_payment">
            <img src="../image/ding.jpg" alt="">
            <p>{{info.status_tips}}</p>
            <p>{{info.tips}}</p>
            <p>{{info.add_time}}</p>
        </div>
        <p class="Orderdetails_p"></p>
        <p class="Orderdetails_number">订单编号:  {{info.order_sn}}</p>
        <div class="Orderdetails_huo">
            <p>收货地址：
                <time>{{info.consignee}}</time>
                <time>{{info.mobile}}</time>
            </p>
            <p>{{info.address}}</p>
        </div>
        <p class="Orderdetails_time">
            送达时间:
            <time>{{info.best_time}}</time>
        </p>
        <p class="Orderdetails_p"></p>
        <p class="Orderdetails_price">
            <time>{{info.num}}</time>件商品 总重约<time>3</time>kg
        </p>
        <div class="Orderdetails_shop"  v-for="goods in info.goods">

            <div class="d_1">
                <img v-bind:src="goods.goods_thumb" alt="">
            </div>
            <div class="d_2">
                <h6 class="h_f_1">{{goods.goods_name}}</h6>
                <p class="sp_p">{{goods.goods_share}} {{goods.goods_weight}}</p>
            </div>
            <div class="price_m1">
                <!--×<time>1</time><span>¥29.9</span>-->
                <span>×<time>{{goods.goods_number}}</time></span>
                <span>¥ {{goods.goods_price}}</span>
            </div>

        </div>
        <p class="Orderdetails_p"></p>
        <p class="Orderdetails_total"><span>商品总价</span><span>¥{{info.goods_amount}}</span></p>
		<p class="Orderdetails_total" v-show="info.insure_fee != '0.00'"><span>赠品抵扣</span><span>¥{{info.insure_fee}}</span></p>
		<p class="Orderdetails_total" v-show="info.insure_fee != '0.00'"><span>优惠券抵扣</span><span>¥{{info.bonus}}</span></p>
				
        <p class="Orderdetails_postage"><span>配送费</span><span>¥{{info.shipping_fee}}</span></p>
        <p class="Orderdetails_amount"><span>实付金额: <time>¥{{info.order_amount}}</time></span></p>
        <p class="Orderdetails_p"></p>
        <div class="Invoice_information">
            <p>发票信息:{{info.inv_payee_tips}}</p>
            <p>支付方式:{{info.pay_name}}</p>
            <p>支付状态:{{info.status_tips}}</p>
            <p>下单时间:<time>{{info.add_time}}</time></p>
        </div>
        <p class="border_Orderdetails"></p>

        </div>
        <ul class="Orderdetails_list">
            <li @click="order_cancel(order_id)">取消订单</li>
            <li @click="show(true)">立即支付</li>
        </ul>
        <!--选着支付方式-->
        <div class="fu" v-show="ss">
            <div class="fu_shop_detail">
                <img src="../image/cha.jpg" alt="" @click="show(false)">
                <h4>{{df}}</h4>
            </div>
            <div v-show="tt"  class="pay1">
                <div class="pay" @click="modes1()">
                    <span>支付方式</span>
                    <span>{{kong}}<time> ></time></span>
                </div>
                <div class="payMoney">
                    <span>需付款</span>
                    <span>￥{{info.order_amount}}</span>
                </div>
                <div class="pay_foot" @click="order_pay(order_id,info.pay_id)">确认支付</div>
            </div>

            <div v-show="t" class="wex">
                <p @click="usePayType(1)">{{wx}} <img src="../image/wx.jpg" alt=""> <span v-bind:class="pay_id == 1 ? 'radio_selected' : ''"></span></p>
                <p @click="usePayType(2)">{{bao}} <img src="../image/zifu.jpg" alt=""> <span v-bind:class="pay_id == 2 ? 'radio_selected' : ''"></span></p>
            </div>
        </div>
        <!--地址选择弹窗-->
        <div class="back_c" v-show="back1" @click="getL()"></div>
    </div>
</template>
<script>

    export default {
        name:'Orderdetails',
        data(){
            return{
                back1:false,
                wx:'微信支付',
                bao:'支付宝支付',
                df:'付款详情',
                kong:'微信支付',
                ss:false,
                pay_id:0,
                info:'',
                t:false,
                tt:true,
				mode:'order_info_unpaid',
				order_id:this.$route.query.order_id,
			    payInfo:[],
            }
        },
		mounted:function(){
            /*Orderdetails_stroll滚动条的滑动设置*/
            //初始值100
            let H = $(window).height()-48
            $('#Orderdetails_stroll').height(H)
			//初始化
			this.getItems(this.mode,this.order_id);		
        },
        methods:{
		    /*点击遮罩付款方式消失*/
            getL:function(){
                if(this.ss=true){
                    this.ss=false;
                    this.back1=false;
                }
            },
            show:function(type){
                this.ss = type;
                this.back1=type;
            },
            modes1:function(){
                this.tt=false;
                this.t=true;
                this.df='选择付款方式'
            },
		    /*点击弹窗触发时的效果*/
		    /*1*/
            // 选择支付方式并提交表单
            usePayType:function (type) {
                this.info.pay_id = type;
                if(type == 1){
                    this.info.pay_name = '微信支付';
                }
                if(type == 2){
                    this.info.pay_name = '支付宝支付';
                }

                let url  = this.GLOBAL.BaseUrl+'/mobile/api/v1/Users.php?mode=payType&order_id='+this.order_id+'&pay_id='+type;
                let Data = this.GLOBAL.dataParam();
                
                this.$ajax.post(url,Data).then((res) => {
                    let temp = res.data;
                    if(temp.code != 200){
                        this.GLOBAL.center_error(this,temp);        
                    }  
                })  

                this.pay_id = type;
                this.tt=true;
                this.t=false;
                this.df='付款详情';
                if(type == '1'){
                    this.kong=this.wx
                }else{
                    this.kong=this.bao;
                };

            },
			getItems:function(mode,order_id){
				if(!order_id || order_id == 0){
					alert('ID异常');
					window.history.go(-1);
				}


                let url  = this.GLOBAL.BaseUrl+'/mobile/api/v1/Users.php?mode='+mode+'&order_id='+order_id;
                let Data = this.GLOBAL.dataParam();
                
                this.$ajax.post(url,Data).then((res) => {
                    let temp = res.data;
                    if(temp.code == 200){
                        this.info = temp.data;
                    }else{
                        this.GLOBAL.center_error(this,temp);        
                    }  
                })
                
			},
            order_pay:function(order_id,pay_id){
			    this.back1=false;
                if(pay_id == 1){
                    window.location.href="/php/v1/wxPay.php?order_id="+order_id;
                }
                if(pay_id == 2){
                    let url  = this.GLOBAL.BaseUrl+'/mobile/api/v1/Public.php?mode=payCode&order_id='+order_id;
                    let Data = this.GLOBAL.dataParam();
                    this.$ajax.post(url,Data).then((res) =>{
                        let temp = res.data;
                        if(temp.code == 200){
                            window.location.href= "/alipay/aliPay.php?code="+temp.data.code;
                        }else{
                            this.GLOBAL.center_error(this,temp);        
                        }  
                    })
                }
            },
            order_cancel:function(order_id){
                
                let url  = this.GLOBAL.BaseUrl+'/mobile/api/v1/Users.php?mode=order_cancel&order_id='+order_id;
                let Data = this.GLOBAL.dataParam();
                
                this.$ajax.post(url,Data).then((res) => {
                    let temp = res.data;
                    if(temp.code == 200){
                        alert('取消订单成功');
                        window.history.go(-1);
                    }else{
                        this.GLOBAL.center_error(this,temp);        
                    }  
                })              
                
            },
            getSuccess:function(){
                this.$router.push('/orderSuccess')
            },
            getOrderdetails1:function(){
                window.history.go(-1);
            }
        }
    }
</script>

<style>
    .h_f_1{
        margin-bottom:0.45rem;
    }
    .Orderdetails_only{
        height:100%;
    }
    /*111*/
    #Orderdetails_stroll{
        overflow-y: auto;
        overflow-x: hidden;
    }
    /*支付方式弹窗*/
    .pay{
        width:100%;
        height:0.94rem;
    }
    .pay span:nth-of-type(1){
        display:block;
        float:left;
        width:1.7rem;
        height:0.94rem;
        text-align:center;
        line-height:0.94rem;
        color:#5e5e5e;
        font-size:0.23rem;
    }
    .pay span:nth-of-type(2){
        width:1.86rem;
        height:0.94rem;
        line-height:0.94rem;
        text-align:center;
        color:#ff8811;
        font-size:0.24rem;
        float:right;
    }
    .pay span:nth-of-type(2) time{
        color:#333;
    }
    .payMoney span:nth-of-type(1){
        width:1.67rem;
        height:1.23rem;
        text-align:center;
        line-height:1.23rem;
        color:#000000;
        font-size:0.25rem;
        float:left;
    }
    .payMoney span:nth-of-type(2){
        width:1.87rem;
        height:1.23rem;
        text-align:center;
        line-height:1.23rem;
        color:#ff8811;
        font-size:0.33rem;
        float:right;
        font-weight:700;
    }
    .wex{
        width:100%;
        height:1.23rem;
    }
    .pay1{
        width:100%;
        height:2.16rem;
    }
    .pay_foot{
        width:100%;
        height:0.74rem;
        text-align:center;
        line-height:0.74rem;
        color: #ffffff;
        font-size:0.3rem;
        position:absolute;
        bottom:0;
        left:0;
        background:#ff8811;
    }
    /*payminey*/
    .payMoney{
        width:100%;
        height:1.23rem;
    }
    .fu p:nth-of-type(1) span.radio_selected{
        background:url(../image/radio.jpg) no-repeat;
        border-color: orangered;
        background-size:cover;
    }
    .fu p:nth-of-type(1) span{
        display:block;
        height:0.25rem;
        width:0.25rem;
        border:1px solid #ccc;
        background:#ffffff;
        position:absolute;
        top:0.2rem;
        right:0.3rem;
        border-radius:50%;
    }
    .fu p:nth-of-type(2) span{
        display:block;
        height:0.25rem;
        width:0.25rem;
        border:1px solid #ccc;
        background:#ffffff;
        position:absolute;
        top:0.2rem;
        right:0.3rem;
        border-radius:50%;
    }
    .fu p:nth-of-type(1){
        width:100%;
        height:0.74rem;
        line-height:0.74rem;
        color:#000000;
        font-size:0.2rem;
        position:relative;
        text-indent: 1.3rem;
    }
    .fu p:nth-of-type(1) img{
        width:0.57rem;
        height:0.38rem;
        position:absolute;
        top:0.14rem;
        left:0.3rem;
    }
    .fu p:nth-of-type(2) img{
        width:0.57rem;
        height:0.38rem;
        position:absolute;
        top:0.14rem;
        left:0.3rem;
    }
    .fu p:nth-of-type(2){
        width:100%;
        height:0.74rem;
        line-height:0.74rem;
        color:#000000;
        font-size:0.2rem;
        position:relative;
        text-indent: 1.3rem;
    }
    .fu_shop_detail{
        height:0.79rem;
        width:100%;
        border-bottom:1px solid #cfcecd;
        position:relative;
        background:#ffffff;
    }
    .fu_shop_detail img{
        height:0.43rem;
        width:0.51rem;
        display:block;
        position:absolute;
        left:0.25rem;
        top:0.25rem;
    }
    .fu_shop_detail h4{
        height:0.79rem;
        color:#000000;
        font-size:0.24rem;
        line-height:0.79rem;
        text-align:center;
        font-weight:normal;
    }
    .fu{
        width:100%;
        height:5.4rem;
        background:#ffffff;
        position:fixed;
        bottom:0;
        left:0;
        z-index:5;
    }
    /*1*/
    .price_m1 span:nth-of-type(2){
        height:0.87rem;
       /* width:1rem;*/
       /* text-align:center;*/
        line-height:0.87rem;
        color:#444444;
        font-size:0.24rem;
        margin-right: 0.22rem;
        float:right;
    }
    .price_m1 span:nth-of-type(1){
        /*width:0.65rem;*/
        height:0.87rem;
        line-height:0.87rem;
       /* text-align:center;*/
        color:#bdbdbd;
        font-size:0.24rem;
        margin-left:0.3rem;
        float:left;
    }
    .price_m1{
        width: 2rem;
        height:1.54rem;
        float:right
      /*  position:absolute;;
        right:0.22rem;
        top:0;*/
    }
    .d_1{
        height:1.54rem;
        width:2.24rem;

        float:left;
        position:relative;
    }
    .d_1 img{
        display:block;
        height:1.2rem;
        width:1.2rem;
        margin:0.18rem 0 0 0.3rem;
    }
    .d_2{
        width:2.04rem;
        height:1.54rem;

        float:left;
    }
    .d_2 h6{
        height:1rem;
        width:2.5rem;
        text-indent:-0.5rem;
        line-height:0.8rem;
        color:#353535;
        font-size:0.24rem;
        font-weight:normal;
    }
    .d_2 .sp_p{
        height:0.45rem;
        width:1.4rem;
        color:#9e9e9e;
        font-size:0.2rem;
        line-height:0.45rem;
        text-indent: -0.5rem;
        margin-top:-0.4rem;
    }
    .a_j div{
        display:block;
        height:0.36rem;
        width:0.36rem;
        border-radius:50%;
        color:#f77602;
        border:1px solid #dbdbdb;
        font-size:0.4rem;
        line-height:0.36rem;
        text-align:center;
    }
    .a_j span{
        display:block;
        height:0.52rem;
        width:0.36rem;
        color:#000000;
        line-height:0.52rem;
        text-align:center;
        font-size:0.18rem;
        margin:0 0.18rem;
    }
    .add_r span:nth-of-type(1){
        height:0.26rem;
        width:0.8rem;
        line-height:0.26rem;
        text-align:center;
        color:#ee8a23;
        font-size:0.2rem;
        position:absolute;
        left:0.1rem;
        top:0.2rem;
    }
    .add_r span:nth-of-type(2){
        height:0.25rem;
        width:0.66rem;
        line-height:0.25rem;
        text-align:center;
        border:1px solid #a5be87;
        border-radius:8px;
        font-size:0.16rem;
        color:#a5be87;
        position:absolute;
        top:0.2rem;
        right:0;
    }
    .shop_list li{
        flex:1;
        line-height:0.5rem;
        text-align:center;
        list-style:none;
        font-size:0.22rem;
        color:#9a9a9a;
    }
    .Orderdetails_list{
        height:0.8rem;
        width:100%;
        display:flex;
     /*   position:fixed;*/
        position:absolute;
        bottom:0;
        left:0;
        background:#ffffff;
        z-index: 4;
    }
    .Orderdetails_list li{
        flex:1;
        list-style:none;
        text-align:center;
        line-height:0.8rem;
        font-size:0.3rem;
    }
    .Orderdetails_list li:nth-of-type(1){
        color:#b0b0b0;
    }
    .Orderdetails_list li:nth-of-type(2){
        color:#ffffff;
        background:#ff7f00;
    }
    .border_Orderdetails{
        height:0.14rem;
        width:100%;
        background:#efeeec;
        border-radius: 5px;
    }
    .Invoice_information p:nth-of-type(1){
        margin-top:0.3rem;
    }
    .Invoice_information p{
        width:100%;
        height:0.5rem;
        line-height:0.5rem;
        color:#a7a7a7;
        text-indent: 0.28rem;
        font-size:0.22rem;
    }
    .Invoice_information{
        height:2.42rem;
        width:100%;
        background:#ffffff;
    }
    .Orderdetails_amount{
        height:0.8rem;
        width:100%;
       /* position:relative;*/
    }
    .Orderdetails_amount span{
        /*width:2.38rem;*/
        height:0.8rem;
        line-height:0.8rem;
       /* text-align:center;*/
        color:#494848;
        font-size:0.24rem;
        float:right;
        margin-right:0.25rem;
        /*right:0;
        top:0;
        position:absolute;*/
    }
    .Orderdetails_amount span time{
        color:#ff962e;
    }
    .Orderdetails_total,.Orderdetails_postage{
        height:0.8rem;
        width:100%;
        border-bottom:1px solid #f0f0f0;
    }
    .Orderdetails_postage span:nth-of-type(1){
        width:1.3rem;
        height:0.8rem;
        line-height:0.8rem;
        text-align:center;
        color:#000000;
        font-size:0.24rem;
        float:left;
    }
    .Orderdetails_postage span:nth-of-type(2){
        height:0.8rem;
       /* width:1.1rem;*/
        margin-right:0.25rem;
        line-height:0.8rem;/*text-align:center;*/
        color:#000000;
        font-size:0.24rem;
        float:right;
    }
    .Orderdetails_total span:nth-of-type(1){
        width:1.54rem;
        height:0.8rem;
        line-height:0.8rem;
        text-align:center;
        color:#000000;
        font-size:0.24rem;
        float:left;
    }
    .Orderdetails_total span:nth-of-type(2){
        height:0.8rem;
        /*width:1.28rem;*/
        line-height:0.8rem;
        color:#000000;
        font-size:0.24rem;
        float:right;
        margin-right: 0.25rem;
    }
    .Orderdetails_shop{
        height:1.54rem;
        width:100%;
        /*position:relative;*/
        border-top:1px solid #f0f0f0;
    }
    .Orderdetails_price{
        width:2.27rem;
        height:0.7rem;
        line-height:0.7rem;
        color:#000000;
        font-size: 0.22rem;
        text-indent: 0.28rem;
    }
    .Orderdetails_time{
        height:0.8rem;
       /* border-bottom:1px solid #cfcecd;*/
        width:100%;
        line-height:0.8rem;
        color:#000000;
        margin-left:0.25rem;
        font-size:0.24rem;
    }
   .Orderdetails_time time{
       color:#ffaa55;

   }
    .Orderdetails_huo{
        min-height:1.1rem;
        width:100%;
        border-bottom:1px solid #f0f0f0;
    }
    .Orderdetails_huo p:nth-of-type(2){
        width:3.51rem;
        min-height:0.36rem;
        line-height:0.36rem;
        margin-left:1.55rem;
        word-break: break-all;
        word-wrap: break-word;
        color:#acacac;
        font-size:0.22rem;

    }
    .Orderdetails_huo p:nth-of-type(1){
        height:0.43rem;
        width:100%;
        color:#313131;
        font-size:0.24rem;
        text-indent: 0.28rem;
        margin-top:0.24rem;
        margin-bottom:0.05rem;

    }
    .Orderdetails_number{
        height:0.8rem;
        width:100%;
        line-height:0.8rem;
        border-bottom:1px solid #f0f0f0;
        text-indent: 0.25rem;
        font-size:0.24rem;

    }
    .Orderdetails_p{
        height:0.1rem;
        width:100%;
        background:#f5f4f2;
    }
    .Orderdetails_payment p:nth-of-type(1){
        height:0.36rem;
        width:100%;
        line-height:0.36rem;
        font-size:0.26rem;
        color:#fd9f30;
        text-indent: 0.75rem;
        margin-top:0.22rem;
    }
    .Orderdetails_payment p:nth-of-type(2){
        height:0.32rem;
        width:100%;
        line-height:0.32rem;
        font-size:0.22rem;
        color:#b1b1b1;
        text-indent: 0.75rem;
    }
    .Orderdetails_payment p:nth-of-type(3){
        height:0.32rem;
        width:100%;
        line-height:0.32rem;
        font-size:0.17rem;
        color:#b1b1b1;
        text-indent: 0.75rem;
    }
    .Orderdetails_payment img{
        height:0.4rem;
        width:0.48rem;
        position:absolute;
        top:0.28rem;
        left:0.18rem;
    }
    .Orderdetails_payment{
        height:1.37rem;
        width:100%;
       /* border-bottom:1px solid #cfcecd;*/
        position:relative;
    }
.Orderdetails_details{
    width:100%;
    height:0.79rem;
    border-bottom:1px solid #f0f0f0;
    position:relative;
}
.Orderdetails_details img:nth-of-type(1){
    height:0.37rem;
    width:0.3rem;
    display:block;
    position:absolute;
    left:0.25rem;
    top:0.25rem;
}
.Orderdetails_details img:nth-of-type(2){
    display:block;
    height:0.35rem;
    width:0.3rem;
    position:absolute;
    top:0.2rem;
    right:0.26rem;
}
.Orderdetails_details h6{
    height:0.79rem;
    line-height:0.79rem;
    text-align:center;
    font-size:0.28rem;
    color:#85a45a;
}
</style>
